<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" 
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:composition>
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>报销凭单</title>    
            <script type="text/javascript">
                javascript:window.history.forward(1);
            </script>   
            <script type="text/javascript">
                function updateCostItemName(code, name)
                {
                    var form = document.forms['expense'];
                    form[[currentLine - 1] * 5 + 13].value = code;
                    form[[currentLine - 1] * 5 + 14].value = name;
                }
                function showCostItem(lineid) {
                    currentLine = lineid;
                    //window.open("./page/pay/business/costItemList.jsf", "费用项目", "height=800,width=800,toolbar=no,menubar=no,scrollbars=no");
                }
                function showProj() {
                    window.open("./pubinfo/projList.jsf", "项目列表", "height=1024,width=800,toolbar=no,menubar=no,scrollbars=no");
                }
                function updateProjSelect(code, name) {
                    document.getElementById('expense:projCode').value = code;
                    document.getElementById('expense:projName').value = name;
                }
                function showPayStyle() {
                    window.open("./business/person/payStyleList.jsf", "支付方式", "height=280,width=600,toolbar=no,menubar=no,scrollbars=no");
                }
                function updatePayStyle(code, name) {
                    document.getElementById('expense:payStyleCode').value = code;
                    document.getElementById('expense:payStyleName').value = name;
                }
            </script>
            <style type="text/css">
                .pic{
                    margin-bottom: -4px;
                    margin-right: -2px;
                    border:none;
                    width:20px;
                    height:20px;
                }
                .gridStyle input[type='text']{
                    width:200px !important;
                }
                .gridStyle select{
                    width:220px;
                }
                .col1{
                    white-space: nowrap;
                    width:80px;
                }
                .col{
                    width:200px;
                }
                .col3{
                    width:80px;
                }
                .feetbStyle input[type='text']{
                    width:98%;
                }                
                .demo_fieldset{
                    border-bottom: none;
                    border-left: none;
                    border-right: none;
                    margin: 10px 0px 10px 0px;
                    padding: 10px 0px 10px 0px;
                }
            </style>
        </h:head>

        <h:body>
            <h:form id="expense">
                <rich:panel styleClass="content-hight">
                    <rich:messages globalOnly="true"/>
                    <h:panelGrid columns="4">
                        <h:outputLabel value="单据状态:"/>
                        <h:panelGroup>
                            <h:outputText value="已提交等待审核"  rendered="#{expinput.exp.numberStatus eq '0'}" style="color:green"/>
                            <h:outputText value="未提交" rendered="#{expinput.exp.numberStatus eq '1'}" style="color:red"/>
                            <h:outputText value="审核通过等待支付"  rendered="#{expinput.exp.numberStatus eq '2'}" style="color:blue"/>
                            <h:outputText value="退回修改"  rendered="#{expinput.exp.numberStatus eq '3'}" style="color:red"/>
                            <h:outputText value="确认支付"  rendered="#{expinput.exp.numberStatus eq '4'}" style="color:blue"/>
                            <h:outputText value="撤单"  rendered="#{expinput.exp.numberStatus eq '5'}" style="color:red"/>
                            <h:outputText value="支付完毕"  rendered="#{expinput.exp.numberStatus eq '6'}" style="color:blue"/>
                        </h:panelGroup>
                        <h:outputLabel value="审核信息：" rendered="#{not empty expinput.exp.checkInfo}" style="margin-left: 50px;"/>
                        <h:outputText value="#{expinput.exp.checkInfo}"/>
                    </h:panelGrid>
                    <rich:toolbar itemSeparator="grida">
                        <rich:toolbarGroup>
                            <h:commandLink action="#{expinput.add}"
                                            disabled="#{!expinput.showAble}"
                                            style=" margin: 1px;">
                                <h:graphicImage value="./images/create_doc.gif" styleClass="pic" title="新增"/>
                            </h:commandLink>

                            <h:commandLink  action="#{expinput.checkandRep}" disabled="#{expinput.saveOrNot}"
                                            actionListener="#{expinput.clearQueryResult}" style="margin: 1px;">
                                <h:graphicImage value="./images/save.gif" styleClass="pic" title="保存"/>
                            </h:commandLink>

                            <h:commandLink  action="#{expinput.update}" style=" margin: 1px;"
                                            disabled="#{expinput.addOrUpdate || expinput.exp.number eq '' || (expinput.exp.numberStatus != '1' and expinput.exp.numberStatus != '3')}">
                                <h:graphicImage value="./images/edit.gif" styleClass="pic" title="修改"/>
                            </h:commandLink>

                            <h:commandLink  action="#{expinput.delete}" actionListener="#{expinput.clearQueryResult}" style=" margin: 1px;"
                                            disabled="#{expinput.addOrUpdate || expinput.exp.number eq '' || (expinput.exp.numberStatus != '1' and expinput.exp.numberStatus != '3')}">
                                <h:graphicImage value="./images/delete.gif" styleClass="pic" title="删除"/>
                            </h:commandLink>

                            <h:commandLink  action="#{expinput.cancel}" disabled="#{expinput.saveOrNot}"
                                            immediate="true"
                                            style=" margin: 1px;text-decoration: none;">
                                <h:panelGroup style="white-space: nowrap;">
                                    <h:graphicImage value="./images/cancel.png" styleClass="pic"/>
                                    <h:outputLabel value="取消" />
                                </h:panelGroup>
                            </h:commandLink>

                            <h:commandLink action="#{expinput.submitBill}" actionListener="#{expinput.clearQueryResult}"
                                           style=" margin: 1px;text-decoration: none;"
                                           disabled="#{expinput.addOrUpdate || expinput.exp.number eq '' || !expinput.saveOrNot || expinput.exp.numberStatus != '1'}">
                                <h:panelGroup style="white-space: nowrap;">
                                    <h:graphicImage value="./images/submit.png" styleClass="pic" />
                                    <h:outputLabel value="提交" />
                                </h:panelGroup>
                            </h:commandLink>

                            <h:commandLink  action="#{expinput.rescind}" actionListener="#{expinput.clearQueryResult}"
                                            disabled="#{!expinput.browAble||expinput.exp.numberStatus != '0'}" 
                                            style=" margin: 1px;text-decoration: none;">
                                <h:panelGroup style="white-space: nowrap;">
                                    <h:graphicImage value="./images/repeat.png" styleClass="pic" />
                                    <h:outputLabel value="撤单" />
                                </h:panelGroup>
                            </h:commandLink>

                            <h:commandLink  action="#{expinput.getFirst}" style=" margin: 1px;"
                                            disabled="#{!expinput.showAble}">
                                <h:graphicImage value="./images/btn_page_first.gif" styleClass="pic" title="首张"/>
                            </h:commandLink>

                            <h:commandLink  action="#{expinput.previouse}" style=" margin: 1px;"
                                            disabled="#{!expinput.showAble}">
                                <h:graphicImage value="./images/btn_page_up.gif" styleClass="pic" title="上张"/>
                            </h:commandLink>

                            <h:commandLink  action="#{expinput.next}" style=" margin: 1px;"
                                            disabled="#{expinput.dis.next}">
                                <h:graphicImage value="./images/btn_page_down.gif" styleClass="pic" title="下张"/>
                            </h:commandLink>

                            <h:commandLink  action="#{expinput.getLast}" style=" margin: 1px;"
                                            disabled="#{expinput.dis.last}">
                                <h:graphicImage value="./images/btn_page_end.gif" styleClass="pic" title="末张"/>
                            </h:commandLink>

                            <a4j:commandLink  render="loanPdf" execute="@form" oncomplete="#{rich:component('voucherPanel')}.show()"
                                              disabled="#{!expinput.showAble or empty expinput.exp.number}" style=" margin: 1px;">
                                <h:graphicImage value="./images/print.gif" styleClass="pic" title="打印"/>
                            </a4j:commandLink>

                        </rich:toolbarGroup>
                    </rich:toolbar>              
                    <p style="text-align:center;font-family:黑体;font-weight:bold;font-size: 20px !important;" >报 销 凭 单</p>
                    <hr style="border:1px dashed;"/>
                    <h:panelGrid columns="6" width="100%" border="0" id="mainform1" style="text-align:left;"
                                 styleClass="gridStyle"
                                 columnClasses="col1,x,x,col1,x,x">
                        <h:outputLabel value="单据编号:"/>
                        <h:inputText  id="number" disabled="true" value="#{expinput.exp.number}"
                                      required="true" requiredMessage="不能为空"/>
                        <rich:message for="number"/>

                        <h:outputLabel value="单据日期:"/>
                        <rich:calendar id="numDate" disabled="#{expinput.showAble}"
                                       value="#{expinput.exp.numDate}"
                                       locale="zh_CN"
                                       popup="true"
                                       datePattern="yyyy-MM-dd"
                                       showApplyButton="false"
                                       inputClass="inputstype"
                                       required="true" requiredMessage="不能为空">
                        </rich:calendar>
                        <rich:message for="numDate"/>

                        <h:outputLabel value="预算项目:" />
                        <h:inputText  id="projName" disabled="#{expinput.showAble}"  value="#{expinput.exp.project.finName}"
                                      onclick="#{rich:component('projPanel')}.show();"/>
                        <rich:message for="projName"/>

                        <h:outputLabel value="报销部门:" />                    
                        <h:inputText  id="paydept"  disabled="#{expinput.showAble}" value="#{expinput.exp.payDept.name}"
                                      onclick="#{rich:component('deptPanel')}.show();"/>
                        <rich:message for="paydept"/>

                        <h:outputLabel value="报销人(经办人):" />
                        <rich:select id="feePerson"
                                     value="#{expinput.exp.feePer.cpsn_number}"
                                     enableManualInput="true"
                                     styleClass="selectStyle"
                                     disabled="#{expinput.showAble}"
                                     required="#{!expinput.showAble}" requiredMessage="不能为空">
                            <f:selectItem itemValue="" itemLabel="-请选择-"/>
                            <f:selectItems value="#{expinput.perli}" />
                        </rich:select>
                        <rich:message for="feePerson"/>

                        <h:outputLabel value="报销内容:"  />
                        <h:inputText  id="affair" disabled="#{expinput.showAble}" value="#{expinput.exp.affair}"
                                      required="true" requiredMessage="不能为空"
                                      validatorMessage="请勿超过30个字">
                            <f:validateLength maximum="30"/>
                        </h:inputText>
                        <rich:message for="affair"/>

                        <h:outputLabel value="备注:"/>
                        <h:inputText id="memo" value="#{expinput.exp.memo}" size="28"  disabled="#{expinput.showAble}"
                                     validatorMessage="请勿超过50个字">
                            <f:validateLength maximum="50"/>
                        </h:inputText>
                        <rich:message for="memo"/>

                        <h:outputLabel value="支付方式:"/>
                        <h:selectOneMenu id="payWay" value="#{expinput.payWay}" 
                                         styleClass="selectStyle"
                                         disabled="#{expinput.showAble}"
                                         required="true" requiredMessage="不能为空">
                            <f:selectItem itemValue="" itemLabel="-请选择-"/>
                            <f:selectItems value="#{expinput.payStyleli}"/>
                        </h:selectOneMenu>
                        <rich:message for="payWay"/>

                        <h:outputLabel value="附件张数:"/>
                        <h:inputText id="affixAmount" value="#{expinput.exp.affixAmount}" size="28"  disabled="#{expinput.showAble}"
                                     required="true" requiredMessage="不能为空"/>
                        <rich:message for="affixAmount"/>
                    </h:panelGrid>
                    <fieldset class="demo_fieldset" style="margin:10px 0px 0px 0px;">
                        <legend>费用项目</legend>
                        <rich:dataTable value="#{expinput.expacc}" var="expacclist"
                                        styleClass="feetbStyle"
                                        id="expacclisttable"
                                        style="width:100%;margin-top:0px;" >

                            <rich:column style=" text-align:  center;" >
                                <f:facet name="header">
                                    <h:panelGroup>
                                        <h:outputText value="编号"/>
                                    </h:panelGroup>
                                </f:facet>
                                <h:inputText id="dtcode"
                                             value="#{expacclist.costitems.code}" size="8"
                                             onclick="showCostItem('#{expacclist.lineid}');#{rich:component('feeItems')}.show();"
                                             disabled="#{expinput.showAble}"
                                             required="true" requiredMessage="不能为空">
                                </h:inputText>
                                <rich:message for="dtcode"/>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:panelGroup>
                                        <h:outputText value="名称"/>
                                    </h:panelGroup>
                                </f:facet>
                                <h:inputText id="dtname"
                                             value="#{expacclist.costitems.name}"
                                             onclick="showCostItem('#{expacclist.lineid}');"
                                             disabled="#{expinput.showAble}"
                                             required="true" requiredMessage="不能为空">
                                </h:inputText>
                                <rich:message for="dtname"/>
                            </rich:column>

                            <rich:column style=" text-align:  center;">
                                <f:facet name="header">
                                    <h:panelGroup>
                                        <h:outputText value="报销金额"/>
                                    </h:panelGroup>
                                </f:facet>
                                <h:inputText id="fee" value="#{expacclist.expenseaccount}"
                                             converterMessage="请输入正确的数字。"
                                             disabled="#{expinput.showAble}"
                                             required="true" requiredMessage="不能为空">
                                    <f:convertNumber type="double" pattern="###,##0.00"/>
                                    <a4j:ajax event="keyup" render="total1,remain" listener="#{expinput.calTotal}"/>
                                </h:inputText>
                                <rich:message for="fee"/>
                            </rich:column>

                            <rich:column style=" text-align: center;">
                                <f:facet name="header">
                                    <h:panelGroup>
                                        <h:outputText value="备注"/>
                                    </h:panelGroup>
                                </f:facet>
                                <h:inputText id="dtmemo" value="#{expacclist.memo}" disabled="#{expinput.showAble}"
                                             validatorMessage="请勿超过20个字">
                                    <f:validateLength maximum="20"/>
                                </h:inputText>
                                <rich:message for="dtmemo"/>
                            </rich:column>
                        </rich:dataTable>
                    </fieldset>
                    <br/>
                    <hr style="border:1px dashed;"/>
                    <h:panelGrid columns="6" width="100%" border="0"
                                 style="text-align:left;"
                                 styleClass="gridStyle"
                                 columnClasses="col1,col,clo2,col3,col,clo2" >

                        <h:outputLabel value="部 门 名 称 :" />
                        <h:outputText id="department" value="#{expinput.exp.dept.name}"  />
                        <h:message for="department"/>

                        <h:outputLabel value="制 单 人 :" />
                        <h:outputText id="cpsn_name" value="#{expinput.exp.user.cpsn_name}"  />
                        <h:message for="cpsn_name"/>   
                    </h:panelGrid>
                </rich:panel>

            </h:form>
        </h:body>

        <rich:popupPanel id="voucherPanel" width="950" height="600">
            <f:facet name="header">
                <h:panelGroup>
                    <h:outputText value="打印"></h:outputText>
                </h:panelGroup>
            </f:facet>

            <f:facet name="controls">
                <h:outputLink value="#" onclick="#{rich:component('voucherPanel')}.hide();">关闭</h:outputLink>
            </f:facet>
            <a4j:mediaOutput element="object" cacheable="false" id="loanPdf"
                             uriAttribute="data"
                             standby="Loading Pdf..." mimeType="application/pdf"
                             type="application/pdf" style="width: 900px;height: 550px"
                             createContent="#{expinput.process}" />
        </rich:popupPanel>

        <rich:popupPanel id="deptPanel" autosized="true">
            <f:facet name="header">
                <h:panelGroup>
                    <h:outputText value="费用承担部门"></h:outputText>
                </h:panelGroup>
            </f:facet>
            <f:facet name="controls">
                <h:outputLink value="#" onclick="#{rich:component('deptPanel')}.hide();">关闭</h:outputLink>
            </f:facet>
            <h:form>
                <rich:panel>
                    <h:panelGrid columns="2"  border="0" id="mainform">
                        <rich:tree value="#{departmentBean.rootNode}" var="idept"
                                   selectionType="ajax" toggleType="client"
                                   selectionChangeListener="#{expinput.selected}"
                                   style="width:300px" render="paydept,feePerson">
                            <rich:treeNode>
                                <h:outputText value="[#{idept.data.code}]#{idept.data.name}" />
                                <rich:componentControl target="deptPanel" operation="hide" event="click"/>
                            </rich:treeNode>
                        </rich:tree>
                    </h:panelGrid>
                </rich:panel>
            </h:form>

            <f:facet name="footer">
                footer!
            </f:facet>
        </rich:popupPanel>

        <rich:popupPanel id="projPanel" autosized="true">
            <f:facet name="header">项目信息</f:facet>
            <f:facet name="controls">
                <h:outputLink value="#" onclick="#{rich:component('projPanel')}.hide();">关闭</h:outputLink>
            </f:facet>
            <h:form id="projList">
                <rich:dataTable id="editTable" value="#{expinput.finProjModel}" rows="10"  var="pro">
                    <rich:column>
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="预算项目编码"/>
                            </h:panelGroup>
                        </f:facet>
                        <a4j:commandLink id="Projlinks" action="#{expinput.projSelected}"
                                         onclick="#{rich:component('projPanel')}.hide();"
                                         render="projName" >
                            <h:outputText value="#{pro.finCode}"/>
                        </a4j:commandLink>
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="预算项目名称"/>
                            </h:panelGroup>
                        </f:facet>
                        <h:outputText value="#{pro.finName}"/>
                    </rich:column>
                    <rich:column>
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="备注"/>
                            </h:panelGroup>
                        </f:facet>
                        <h:outputText value="#{pro.memo}"/>
                    </rich:column>

                    <f:facet name="footer">
                        <rich:dataScroller id="ds"></rich:dataScroller>
                    </f:facet>
                </rich:dataTable>
            </h:form>
        </rich:popupPanel>

        <rich:popupPanel id="feeItems" autosized="true">
            <f:facet name="header">费用项目</f:facet>
            <f:facet name="controls">
                <h:outputLink value="#" onclick="#{rich:component('feeItems')}.hide();">关闭</h:outputLink>
            </f:facet>
            <h:form>
                <div style="width:400px;height: 400px;overflow: auto;">
                    <rich:tree style="width:300px"
                               selectionType="ajax"
                               toggleType="client"
                               render="costinfo"
                               value="#{coitem.rootNode}"
                               var="idept" >
                        <rich:treeNode ondblclick="updateCostItemName('#{idept.data.code}', '#{idept.data.name}');#{rich:component('feeItems')}.hide();">
                            <h:outputText value="[#{idept.data.code}]#{idept.data.name}" />
                        </rich:treeNode>
                    </rich:tree>
                </div>
            </h:form>
        </rich:popupPanel>
    </ui:composition>
</html>
